import { Fragment } from "react";
import Markdown from "markdown-to-jsx";
import { notFound } from "next/navigation";

import InfoBar from "~/components/InfoBar";

import styles from "~/styles/index.module.css"
import system from "~/config/system.json"

export async function generateStaticParams() {
  const memberSlugs = system.members.map(member => member.name.toLowerCase())
  return memberSlugs.map((name: string) => ({ name }))
}

export default function MemberPage({ params: { name } }) {
  const member = system.members.find(member => member.name.toLowerCase() === name)

  if (!member) notFound()

  return (
    <>
      <main className="mainColumn card">
        <InfoBar memberName={member.name} />
        <Markdown outer="short">{member.bioShort}</Markdown>
        <Markdown outer="long">{member.bioContinued}</Markdown>
        {member.bioFields?.length && (
          <div className={styles.glance}>
            {member.bioFields.map(({ name, value }) => (
              <Fragment key={name}>
                <span className={styles.label}>{name}</span>
                <span>{value}</span>
              </Fragment>
            ))}
          </div>
        )}
      </main>
    </>
  )
}
